<template>
    <div id="home">
        <nav-bar>
            <template v-slot:default>
                图书商城
            </template>
        </nav-bar>

        <div class="search" v-show="isShowSearch">
            <van-search
                v-model="value"
                placeholder="请输入书名"
                @click="onSearch(value)"
            >
            </van-search>
        </div>

        <tab-control v-show="isTabFixe" @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>

        <div class="wrapper">
            <div class="content">
                <div ref="banref">
                    <div class="search">
                        <van-search
                            v-model="value"
                            placeholder="请输入书名"
                            @click="onSearch(value)"
                        >
                            
                        </van-search>
                    </div>
                    <home-swiper :banners="banners"></home-swiper>

                    <recommend-view :recommends="recommends"></recommend-view>
                </div>
                <tab-control @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
                <goods-list :goods="searchGoods" v-if="(value!='')"></goods-list>
                <goods-list :goods="showGoods" v-if="(value=='')"></goods-list>
             </div>
        </div>

        <back-top @bTop="bTop" v-show="isShowBackTop"></back-top>
        
    </div>
</template>

<script>
    import HomeSwiper from './ChildComps/HomeSwiper.vue';
    import NavBar from '@/components/common/navbar/NavBar.vue';
    import RecommendView from './ChildComps/RecommendView.vue';
    import TabControl from 'components/content/tabControl/TabControl.vue';
    import GoodsList from 'components/content/goods/GoodsList.vue';
    import BackTop from 'components/common/backtop/BackTop.vue';
    import {getHomeAllData, getHomeGoods, getSearch} from 'network/home';
    import {ref, reactive, onMounted, computed, watchEffect,nextTick} from 'vue';
    import BScroll from 'better-scroll';



    export default {
        name: "Home",
        setup() {
            let isTabFixe = ref(false);
            let isShowBackTop = ref(false);
            let banref = ref(null);
            const recommends = ref([]);
            const value = ref('');

            //是否显示搜索栏
            let isShowSearch = ref(false);

            //声明一个商品列表数据模型
            const goods = reactive({
                sales: {page:1, list:[]},
                new: {page:1, list:[]},
                recommend: {page:1, list:[]},
                search:{page:0,list:[]}
            })

            //声明搜索栏
            const onSearch = (value) => {
                nextTick(() => {
                    //重新计算高度
                    bscroll && bscroll.refresh();
                })
                console.log('111');
                getSearch(value).then(res => {
                    console.log(value);
                    goods.search.list = res.goods.data;
                    // console.log(res);
                })
            }

            //清楚当前访问的数据类型
            let currentType = ref('sales');

            //计算属性
            const showGoods = computed(()=>{
                return goods[currentType.value].list;
            })
            const searchGoods = computed(() => {
                return goods.search.list;
            })

            let bscroll = reactive({});
            let banners = ref([]);

            onMounted(()=>{
                getHomeAllData().then(res=>{
                    // console.log(res.goods);
                    
                    //获取商品推荐的所有数据
                    recommends.value = res.goods.data;

                    //获取轮播图的数据
                    banners.value = res.slides;
                })

                getHomeGoods('sales').then(res=>{
                    goods.sales.list = res.goods.data;
                })

                getHomeGoods('recommend').then(res=>{
                    goods.recommend.list = res.goods.data;
                })

                getHomeGoods('new').then(res=>{
                    goods.new.list = res.goods.data;
                })

                //创建BetterScroll对象
                bscroll = new BScroll(document.querySelector('.wrapper'),{
                    probeType: 3,  //0，1，2，3  3是代表了只要在运行时就触发scroll事件
                    click: true,   //是否允许点击事件触发
                    pullUpLoad: true //上拉加载更多，默认是假
                });

                // console.log(banref.value);

                //使用触发滚动事件
                bscroll.on('scroll',(position)=>{
                    console.log(banref.value.offsetHeight);
                    // console.log(position.y);

                    isShowBackTop.value = isTabFixe.value = (-position.y) > banref.value.offsetHeight;
                })

                //上拉加载数据,触发pullingup
                bscroll.on("pullingUp",()=>{
                    console.log('上拉加载更多.....');
                    const page = goods[currentType.value].page + 1;
                    if(value.value==''){
                        getHomeGoods(currentType.value, page).then(res=>{
                            // 1.把数组中的元素孤立起来
                            // let iArray = ['1', '2', '3'];
                            // console.log(...iArray);
                            // 打印结果 1 2 3 
                            goods[currentType.value].list.push(...res.goods.data);
                            goods[currentType.value].page += 1;
                        })
                    }else{
                        getSearch(value.value,pages).then(res => {
                            console.log(value.value);
                            goods.search.list.push(...res.goods.data);
                            goods.search.page+=1;
                            // console.log(goods.search.page);
                            // console.log(res);
                        })
                    }
                    

                    //完成上拉加载，等数据请求加载完成之后，要将新加载出来的数据重新展示在页面上
                    bscroll.finishPullUp();

                    //加载完成之后重新 计算高度
                    bscroll.refresh();
                    console.log("conten:"+document.querySelector('.content').clientHeight);
                    if(value.value==''){
                        console.log("当前类型:"+currentType.value+",当前页:"+page);
                    }else{
                        console.log('当前类型:'+currentType.value+',当前页'+pages);
                    }
                    
                })

            })

            const tabClick = (index) => {
                let types = ['sales','new','recommend'];

                currentType.value = types[index];
                nextTick(()=>{
                    //重新计算高度
                   bscroll && bscroll.refresh();
                })
            }

            //监听任何一个数据的变化
            watchEffect(()=>{
                nextTick(()=>{
                    //重新计算高度
                   bscroll && bscroll.refresh();
                })
            })

            const bTop = ()=>{
                bscroll.scrollTo(0, 0, 500);
            }

            return {
                recommends,
                tabClick,
                goods,
                showGoods,
                isTabFixe,
                isShowBackTop,
                banref,
                bTop,
                banners,
                isShowSearch,
                searchGoods,
                onSearch,
                value
            }
        },
        components: {
            HomeSwiper,
            NavBar,
            RecommendView,
            TabControl,
            GoodsList,
            BackTop
        }
    }
</script>

<style scoped>
.banners img {
    width: 100%;
    height: auto;
}

#home {
    height: 100vh;
    position: relative;
}

    .wrapper {
        position: absolute;
        top: 45px;
        bottom: 50px;
        left: 0;
        right: 0;
        overflow: hidden;
    }

    /* .content {

    } */

    .search {
        z-index: 30;
        /* color: #000; */
        margin-top: 45px;
    }

</style>